<template>
	<view class="container">
		<view class="header">
			<view class="user">
				<u-avatar :src="src" size="60"></u-avatar>
				<view class="user-info">
					<text class="user-name">注册/登录</text>
					<text class="user-tips">设置</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-top">
				<view class="title-box">
					<view class="line"></view>
					<text class="title">全部订单</text>
				</view>
				<text class="more">查看全部订单 ></text>
			</view>
			<view class="card-list">
				<view class="list-item">
					<image src="../../static/order/daifukuan.png" mode="widthFix" class="item-icon"></image>
					<text class="item-name">待付款</text>
				</view>
				<view class="list-item">
					<image src="../../static/order/daifahuo.png" mode="widthFix" class="item-icon"></image>
					<text class="item-name">待发货</text>
				</view>
				<view class="list-item">
					<image src="../../static/order/daishouhuo.png" mode="widthFix" class="item-icon"></image>
					<text class="item-name">待收货</text>
				</view>
				<view class="list-item">
					<image src="../../static/order/tuihuo.png" mode="widthFix" class="item-icon"></image>
					<text class="item-name">退货/款</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="title-box">
				<view class="line"></view>
				<text class="title">帮助中心</text>
			</view>
			<view class="card-list">
				<view class="list-item">
					<u-icon name="rmb-circle" size="28"></u-icon>
					<text class="item-name">售后规则</text>
				</view>
				<view class="list-item">
					<u-icon name="file-text" size="32"></u-icon>
					<text class="item-name">服务条款</text>
				</view>
				<view class="list-item">
					<u-icon name="info-circle" size="28"></u-icon>
					<text class="item-name">关于我们</text>
				</view>
				<view class="list-item">
					<u-icon name="server-man" size="32"></u-icon>
					<text class="item-name">联系我们</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F6F6F6;
		min-height: 100vh;
	}

	.header {
		display: flex;
		flex-direction: column;
		padding: 68rpx 40rpx;
		background: linear-gradient(to bottom, #D9F8E6 0%, #D8F3FC 100%);

		.user {
			display: flex;

			.user-info {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: space-between;

				.user-name {
					font-size: 32rpx;
					font-weight: 600;
				}

				.user-tips {
					font-size: 26rpx;
					font-size: #768484;
				}
			}
		}
	}

	.card {
		width: 100%;
		border-radius: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		padding: 20rpx;
		margin-top: -30rpx;
		margin-bottom: 60rpx;

		.card-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.more {
				font-size: 28rpx;
				color: #686868;
			}
		}

		.title-box {
			display: flex;
			align-items: center;

			.line {
				width: 8rpx;
				height: 40rpx;
				background-color: #2C8246;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
				margin-left: 20rpx;
			}
		}

		.card-list {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.list-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.item-icon {
					width: 60rpx;
				}

				.item-name {
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>